<template>
  <div class="dashboard">
    <div class="data-pick">
      <a-select default-value="week"
                style="width: 200px"
                @change="handleChange">
        <a-select-option value="week">
          近一周
        </a-select-option>
        <a-select-option value="month">
          近一月
        </a-select-option>
        <a-select-option value="threeMonth">
          近三月
        </a-select-option>
        <a-select-option value="halfYear">
          近半年
        </a-select-option>
        <a-select-option value="year">
          近一年
        </a-select-option>
      </a-select>
    </div>
    <div class="days-live"
         id="myChart"
         :style="{ width: '90%', height: '700px' }">

    </div>

  </div>
</template>
<script>
import { daysLiveQuery } from "@a/sysLivenumber"
export default {
  data () {
    return {
      deysLivenumber: {
        startDate: this.funDate(- 6),
        endDate: this.funDate(0)
      },
      myChart: null
    };
  },
  mounted () {
    this.drawLine();
  },
  created () { },
  methods: {
    handleChange (value) {
      switch (value) {
        case 'month':
          this.deysLivenumber.startDate = this.funDate(-1, 'month')
          break
        case 'threeMonth':
          this.deysLivenumber.startDate = this.funDate(-3, 'month')
          break
        case 'halfYear':
          this.deysLivenumber.startDate = this.funDate(-6, 'month')
          break
        case 'year':
          this.deysLivenumber.startDate = this.funDate(-12, 'month')
          break
        default:
          this.deysLivenumber.startDate = this.funDate(-6)
          break
      }
      this.daysLiveQuery()
    },
    drawLine () {
      let that = this
      // 基于准备好的dom，初始化echarts实例
      if (!this.myChart) {
        that.myChart = that.$echarts.init(document.getElementById("myChart"));
      }
      that.daysLiveQuery()
      that.myChart.resize();
      //自动适应大小
      window.addEventListener("resize", function () {
        that.myChart.resize();
      });

    },
    daysLiveQuery () {
      daysLiveQuery(this.deysLivenumber).then(res => {
        // 绘制图表
        let xAxis = []
        let yAxis = []
        for (let k of Object.keys(res.data)) {
          xAxis.push(k);
          yAxis.push(res.data[k])
        }

        this.myChart.setOption({
          title: { x: 'center', text: "用户日活量数据" },
          tooltip: {},
          xAxis: {
            name: "日期",
            data: xAxis
          },
          yAxis: {
            name: "数量",
            type: "value"
          },
          series: [
            {
              name: "活跃人数",
              type: "line",
              data: yAxis,
              itemStyle: { normal: { label: { show: true } } },
            }
          ]
        });
      })
    },
    funDate (num, unit) {
      let date = new Date();
      switch (unit) {
        case 'month':
          date.setMonth(date.getMonth() + num)
          break
        default:
          date.setDate(date.getDate() + num)
      }
      var month = date.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
      var mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
      var secs = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      // var now1 = date.getFullYear() + '/' + month + '/' + day;
      return date.getFullYear() + '/' + month + '/' + day + " " + hours + ":" + mins + ":" + secs;
    }
  }
};
</script>
<style>
.dashboard .days-live {
  padding-top: 80px;
}
.dashboard .data-pick {
  position: relative;
  float: right;
  right: 200px;
  top: 50px;
  z-index: 1;
}
</style>
